<template>
	<div class="shipin-box" @scroll=gSp>
		<div class="shipin-title">
			<ul class="shipin-title-left">
				<li @click="$router.go(-1)"><img src="http://pub.szzhangchu.com/web/v4.2/images/ico/ico-back-black.png"/></li>
				<li style="width: 100%;text-align: center;">彩蛋黄瓜卷</li>
			</ul>
			<img src="http://pub.szzhangchu.com/web/v4.2/images/ico/menu.png"/>
		</div>
		<div class="shipin-center">
			<div class="shipin-center-top">
				<video v-if="sjShow" src="http://video.szzhangchu.com/caidanhuangguajuanA.mp4" controls="controls" width="100%">
					您的浏览器不支持 video 标签。
				</video>
				<video v-if="!sjShow" src="http://video.szzhangchu.com/caidanhuangguajuanB.mp4" controls="controls" width="100%">
					您的浏览器不支持 video 标签。
				</video>
				<div class="shipin-anniu">
					<span @click=sjD :class="[svD]"><img src="http://pub.szzhangchu.com/web/v4.2/images/ico/ico-play-list.png"/>食材准备(上集)</span>
					<span @click=xjD :class="[xvD]"><img src="http://pub.szzhangchu.com/web/v4.2/images/ico/ico-play-list.png"/>详细步骤(下级)</span>
				</div>
			</div>
			<div class="shipin-jies">
				<ul class="jieshi">
					<li>
						<img src="http://pub.szzhangchu.com/web/v4.2/images/ico/ico-cook-level.png"/>
						<span>难度:一般</span>
					</li>
					<li>
						<img src="http://pub.szzhangchu.com/web/v4.2/images/ico/ico-time.png"/>
						<span>烹饪时间:4分钟</span>
					</li>
					<li>
						<img src="http://pub.szzhangchu.com/web/v4.2/images/ico/ico-taste.png"/>
						<span>口味:鲜</span>
					</li>
				</ul>
			</div>
			<div class="shipin-bottom">
				<ul :class="[gSps]" class="bottom-nav">
					<router-link to="/shiping/gZuofa"><li>做法</li></router-link>
					<router-link to="/shiping/gShicai"><li>食材</li></router-link>
					<router-link to="/shiping/gXiangguan"><li>相关常识</li></router-link>
					<router-link to="/shiping/gXiangyi"><li>相宜相克</li></router-link>
				</ul>
				<router-view></router-view>
			</div>
		</div>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				sjShow:true,
				xjShow:false,
				isA:true,
				svD:"vd1",
				xvD:"vd2",
				scroll:"",
				gSps:"c"
			}
		},			
		methods:{
			sjD:function(){
				this.sjShow=true;
				this.xjShow=false;
				this.svD="vd1";
				this.xvD="vd2";
			},
			xjD:function(){
				this.sjShow=false;
				this.xjShow=true;
				this.svD="vd2";
				this.xvD="vd1";				
			},
			gSp:function(){
				this.scroll=$('.shipin-box').scrollTop();
				var gSheight = $(".shipin-title").height()+$(".shipin-center").height();
				if(this.scroll > 300){
					this.gSps="bottom-nav1";
				}else if(this.scroll < 300){
					this.gSps="c";
				}
			}
		}
	}
</script>

<style>
	.shipin-box{
			width: 100%;
			height: 100vh;
			position: fixed;
			top: 0;	
			z-index: 99;	
			background: #eee;
			overflow-y: scroll;			
		}
	.shipin-title{
			width: 100%;
			display: flex;
			background: #fff;
		    color: #333;
		    justify-content: space-between;	
		    position: fixed;
		    z-index: 99;	    
		}	
	.shipin-title-left{
			display: flex;
			color: #333;
		    padding-left: 0.2rem;
		    font-size: .3rem;
		    height: .8rem;
		    line-height: .8rem;
		    width: 85%;
		}
	.shipin-title img{
			width: .6rem;
			height: .6rem;
			margin-top: .1rem;
		}
	.shipin-center{
		margin-top: .8rem;
	}
	.shipin-anniu{
		width: 100%;
		height: .7rem;
		background: #bbb;
		line-height: .7rem;
		display: flex;
		justify-content: space-around;
	}
	.vd1{
		color: #f2682a;
	}
	.vd2{
		color: #5d5d5d;
	}
	.shipin-anniu>span{
		width: 50%;
		display: flex;
		justify-content: center;
	}
	.shipin-anniu>span>img{
		margin-top: .24rem;
		margin-right: .1rem;
		width: .25rem;
		height: .25rem;		
	}
	.jieshi{
		width: 100%;
		height: 1rem;
		display: flex;
		justify-content: space-around;
		align-items: center;
		background: #fff;
	}
	.jieshi li{
		display: flex;
		flex-direction: column;
		align-items: center;
		color:#5d5d5d ;
	}
	.jieshi img{
		width: .3rem;
		margin-bottom: .1rem;
		height: .3rem;	
	}
	.shipin-bottom{
		margin-top: .2rem;
		background: #fff;
	}
	.bottom-nav{
		width: 100%;
		background: #fff;
		display: flex;
		justify-content: space-around;
		height: 1rem;
		line-height: 1rem;		
	}
	.bottom-nav1{
		position: fixed;
		top: .7rem;
		z-index: 88;	
	}
	.bottom-nav a{
		width: 25%;
		text-align: center;
	}
	.bottom-nav .router-link-exact-active{
		border-bottom:.05rem solid #f2682a;
	}
	.bottom-nav a li{
		color:#5d5d5d;
	}
</style>